<template>
  <div ref="scroller" class="pullup-bswrapper">
    <div class="pullup-scroller">
      <div v-if="requestState === 'loading'">
        正在请求数据
      </div>
      <div v-else-if="requestState === 'error'">
        请求数据失败
      </div>
      <div v-else-if="requestState === 'empty'">
        没有正在热映的数据
      </div>
      <ul v-else class="pullup-list">
        <li
            v-for="movie of movieList"
            :key="movie.id"
            class="pullup-list-item"
        >
          <movie-item v-bind:movie="movie"></movie-item>
        </li>
      </ul>
      <div class="pullup-wrapper">
        <div v-if="!isPullUpLoad" class="before-trigger">
          <span class="pullup-txt">上拉加载更多</span>
        </div>
        <div v-else class="after-trigger">
          <span class="pullup-txt">加载中……</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "@better-scroll/core";
import Pullup from "@better-scroll/pull-up";
import { getInitMovieList, getMoreMovieList } from "../../api/index";
import MovieItem from './MovieItem'
// 使用插件，必须调用BetterScroll.use方法
BScroll.use(Pullup);

export default {
  data() {
    return {
      isPullUpLoad: false,
      movieList: null,
      movieIds: [],
      requestState: "loading",
      requestMoreState: "loading",
      start: -1
    };
  },
  components:{
    MovieItem
  },
  created() {
    // 创建Vue实例时
    this.bscroll = null;
  },
  async mounted() {
    // 实例渲染之后，初始化
    try {
      const data = await getInitMovieList();
      const { movieList, movieIds } = data;
      this.movieList = movieList;
      this.start = movieList.length;
      this.movieIds = movieIds;
      if (this.movieList.length === 0) {
        this.requestState = "empty";
      } else {
        this.requestState = "success";
        // 改变响应式数据并没有立刻更新DOM
        this.$nextTick(() => {
          this.initBScroll();
        });
      }
    } catch (e) {
      this.requestState = "error";
      console.error(e);
    }
  },
  methods: {
    initBScroll() {
      // 初始化BetterScroll
      this.bscroll = new BScroll(this.$refs["scroller"], {
        scrollY: true, // 支持垂直方向滑动
        pullUpLoad: true // 支持上拉加载
      });
      // 监听pullingUp
      this.bscroll.on("pullingUp", this.pullingUpHandler);
    },
    async pullingUpHandler() {
      this.isPullUpLoad = true;
      await this.requestData();
      // 成功请求的执行结果
      this.bscroll.finishPullUp();
      // refresh表示提醒bscroll内部DOM有修改。
      this.bscroll.refresh();
      this.isPullUpLoad = false;
    },
    async requestData() {
      // 用到了movieIds
      // 请求从第11条数据开始，一共请求11条
      this.requestMoreState = 'loading'
      if (this.start >= this.movieIds.length) {
        // 所有电影都请求完毕
        this.requestMoreState = 'complete'
      } else {
        let end = this.start + 10;
        const slicedMovieIds = this.movieIds.slice(this.start, end);
        this.start = end;
        try {
          const data = await getMoreMovieList(slicedMovieIds);
          const { coming } = data;
          // 把新的请求结果追加到已有的movieList中
          if(coming.length !== 0){
            this.movieList = this.movieList.concat(coming);
          }else{
            // 请求参数问题
          }
          this.requestMoreState = 'success'
        } catch (err) {
          this.requestMoreState = 'error'
          throw err
        }
      }
    }
  }
};
</script>

<style lang="stylus">
  @import "../../assets/styles/border.styl"
.pullup-bswrapper
  height: 400px
  padding: 0 10px
  overflow: hidden
.pullup-list
  padding: 0
.pullup-list-item
  padding: 10px 0
  list-style: none
  border1px(0 0 1px 0,#ccc,solid)
  /*border-bottom: 1px solid #ccc*/
.pullup-wrapper
  padding: 20px
  text-align: center
  color: #999
</style>
